<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholderStyle="color: #fff;"
              placeholder="搜索员工" border="none" color="#fff" shape="circle" v-model="search" @confirm="searchChange">
              <clIcon slot="prefix" type="icon-sousuo_o" color="#fff" size="25"></clIcon>
            </u--input>
          </view>
          <view class="flex flex-c f-35"> 总人数 </view>
          <view class="flex flex-c f-30 m-b-20"> 3 </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-240">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <u-cell :title="item.realName" @click="go(item)">
            <u-avatar slot="icon" :text="getName(item.realName)" fontSize="18" randomBgColor></u-avatar>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getlist, addData, delectData } from "@/apis/bill/information/staff";
import { getStringOne } from "@/utils/util.js";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      indexList: [],
      config: {
        title: "员工",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      pages: {
        current: 1,
        size: 20,
      },
      isJump: null, //控制点击列表是跳转回去还是跳转到详情 true == 回去  其他 == 详情
    };
  },
  onLoad() {
    if (this.$Route.query.isJump) {
      this.isJump = this.$Route.query.isJump
    }
  },
  onShow() {
    this.pages.current = 1
    this.pages.size = 20
    this.indexList = []
    this.initData();
  },
  computed: {},
  methods: {
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let _this = this;
      let billId = {
        data: {
          isEnable: true,
          keywords: this.search,
        },
        page: {
          current: _this.pages.current,
          size: _this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "create_time",
              asc: false,
            },
          ],
        },
      };
      // console.log("billId", billId);
      getlist(billId).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.indexList = [...data.records, ...this.indexList];
      });
    },
    getName(name) {
      return getStringOne(name);
    },
    searchChange() {
      this.goodSpuDataArr = [];
      this.pages.current = 1;
      this.initData();
    },
    scrolltolower(e) {
      this.pages.current++;
      this.initData();
      // 到底了
    },
    go(item) {
      if (this.isJump) {
        uni.$emit('on-staff-custom-details', item)
        this.$Router.back()
      } else {
        this.$Router.push({
          path: "/pages/application/pages/personnel/staff/staff-details/staff-details",
          query: {
            id: item.id
          },
        });
      }
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          name: "personnelStaffStaffDetails",
        });
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
